/**
 * Demonstrates a range of Button options the framework offers out of the box
 */
Ext.define('cloud.view.product.ProductAdd', {
    extend: 'Ext.form.FormPanel',
    xtype: 'productadd',

    requires: ['Ext.form.Panel', 'Ext.form.FieldSet', 'Ext.field.Toggle', 'Ext.field.Select', 'Ext.ux.Fileup', 'Ext.Img'],
    config: {
        title: '景点详情',
        items: [
            {
                xtype: 'toolbar',
                docked: 'bottom',
                layout: {
                    type: 'hbox',
                    pack: 'end'
                },
                items: [
                    {
                        id: 'product_submit',
                        iconMask: true,
                        scope: this,
                        cls: 'x-button2',
                        text: '提交',
                        style: 'float:right'
                    }
                ]
            },
            {
                xtype: 'fieldset',
                id: 'fieldset',
                title: '添加景点',
                defaults: {
                    labelwidth: '20%',
                    xtype: 'textfield',
                    required: true,
                    clearIcon: true
                },
                items: [
                    {
                        id: 'product_name',
                        name: 'product_name',
                        label: '产品名称',
                        maxLength: 50,
                        placeHolder: '请输景点名称'
                    },
                    {
                        xtype: 'selectfield',
                        store: 'CategoryAllFindStore',
                        id: 'category',
                        name: 'category',
                        label: '选择分类',
                        displayField: 'name',
                        valueField: 'ccid',
                        listeners: {
                            initialize: function () {
                                var category = Ext.getStore('CategoryAllFindStore');
                                category.load({params: {cadid: localStorage.getItem('cadid')}});
                            }
                        }
                    },
                    {
                        xtype: 'textareafield',
                        id: 'explain',
                        name: 'explain',
                        label: '景点简介',
                        placeHolder: '景点简介',
                        required: true,
                        clearIcon: false
                    },
                    {
                        xtype: 'hiddenfield',
                        id: 'material',
                        name: 'material',
                        maxLength: 150,
                        maxRows: 2,
                        value:"111",
                        label: '产品原料',
                        placeHolder: '产品原料',
                        required: false,
                        clearIcon: false
                    },
                    {
                        xtype: 'hiddenfield',
                        id: 'term',
                        name: 'term',
                        maxLength: 150,
                        maxRows: 2,
                        value:"111",
                        label: '景点术语',
                        placeHolder: '景点术语',
                        required: false,
                        clearIcon: false
                    },
                    {
                        xtype: 'hiddenfield',
                        name: 'disabled',
                        id: 'disabled',
                        label: '是否启用',
                        labelWidth: '30%',
                        value: '1'
                    },
                    {
                        xtype: 'hiddenfield',
                        name: 'recommend',
                        id: 'recommend',
                        label: '是否推荐',
                        labelWidth: '30%',
                        value: '0'
                    },
                    {
                        xtype: 'hiddenfield',
                        title: '产品规格',
                        cls: 'x-form-fieldset2',
                        id: 'checkboxSet',
                        required: true
                    },
                    {
                        xtype: 'fieldset',
                        title: '产品缩略图　<span style="color:#cccccc;font-size: 15px;">（200*200）</span>',
                        cls: 'x-form-fieldset3',
                        required: true
                    },
                    {
                        xtype: 'panel',
                        style: 'margin-top: -20px;',
                        items: [
                            {
                                xtype: 'img',
                                style: ' margin-left:20px;margin-bottom:10px;height:200px;width:200px;border:1px solid #ccc;',
                                id: 'product_loadedImage',
                                required: true
                            },
                            {
                                itemId: 'product_upload',
                                xtype: 'fileupload',
                                style: ' margin:10px auto 10px 60px; width:100px; height:10px;',
                                autoUpload: true,
                                loadAsDataUrl: true,
                                states: {
                                    browse: {
                                        text: '上传图片'
                                    },
                                    ready: {
                                        text: 'Load'
                                    },
                                    uploading: {
                                        text: 'Loading',
                                        loading: true
                                    }
                                }
                            }
                        ]
                    },
                    {
                        xtype: 'fieldset',
                        title: '景点展示　<span style="color:#cccccc;font-size: 15px;">（320*160）</span>',
                        cls: 'x-form-fieldset3',
                        required: true
                    },
                    {
                        xtype: 'panel',
                        style: 'float:left;padding-left:10px;margin-top:-20px;',
                        items: [
                            {
                                xtype: 'img',
                                style: ' margin-left:10px;margin-bottom:10px;height:200px;width:200px;border:1px solid #ccc;',
                                id: 'product_loadedImage_two',
                                required: true
                            },
                            {
                                itemId: 'product_upload_two',
                                xtype: 'fileupload',
                                style: ' margin:0 auto;margin-bottom:10px; width:100px; height:10px;margin-bottom:20px;',
                                autoUpload: true,
                                loadAsDataUrl: true,
                                states: {
                                    browse: {
                                        text: '上传图片'
                                    },
                                    ready: {
                                        text: 'Load'
                                    },
                                    uploading: {
                                        text: 'Loading',
                                        loading: true
                                    }
                                }
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        style: 'float:left;padding-left:10px;', 
                        items: [
                            {
                                xtype: 'img',
                                style: ' margin-left:10px;margin-bottom:10px;height:200px;width:200px;border:1px solid #ccc;',
                                id: 'product_loadedImage_three',
                                required: true
                            },
                            {
                                itemId: 'product_upload_three',
                                xtype: 'fileupload',
                                style: ' margin:0 auto;margin-bottom:10px; width:100px; height:10px;margin-bottom:20px;',
                                autoUpload: true,
                                loadAsDataUrl: true,
                                states: {
                                    browse: {
                                        text: '上传图片'
                                    },
                                    ready: {
                                        text: 'Load'
                                    },
                                    uploading: {
                                        text: 'Loading',
                                        loading: true
                                    }
                                }
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        style: 'float:left;padding-left:10px;',
                        items: [
                            {
                                xtype: 'img',
                                style: ' margin-left:10px;margin-bottom:10px;height:200px;width:200px;border:1px solid #ccc;',
                                id: 'product_loadedImage_four',
                                required: true
                            },
                            {
                                itemId: 'product_upload_four',
                                xtype: 'fileupload',
                                style: ' margin:0 auto;margin-bottom:10px; width:100px; height:10px;margin-bottom:20px;',
                                autoUpload: true,
                                loadAsDataUrl: true,
                                states: {
                                    browse: {
                                        text: '上传图片'
                                    },
                                    ready: {
                                        text: 'Load'
                                    },
                                    uploading: {
                                        text: 'Loading',
                                        loading: true
                                    }
                                }
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        style: 'float:left;padding-left:10px;',
//                        width: '200px',
                        items: [
                            {
                                xtype: 'img',
                                style: ' margin-left:10px;margin-bottom:10px;height:200px;width:200px;border:1px solid #ccc;',
                                id: 'product_loadedImage_five',
                                required: true
                            },
                            {
                                itemId: 'product_upload_five',
                                xtype: 'fileupload',
                                style: ' margin:0 auto;margin-bottom:10px; width:100px; height:10px;margin-bottom:20px;',
                                autoUpload: true,
                                loadAsDataUrl: true,
                                states: {
                                    browse: {
                                        text: '上传图片'
                                    },
                                    ready: {
                                        text: 'Load'
                                    },
                                    uploading: {
                                        text: 'Loading',
                                        loading: true
                                    }
                                }
                            }
                        ]
                    }

                ]
            }
        ]
    }
});